<template>
  <div id="personalSetting">

    <div class="personalSetting">
       <!-- 左侧信息和导航 -->
      <div class="settingLeft">
          <div class="avator-wapper">
              <div class="avator-mode">
                  <img src="https://img1.sycdn.imooc.com/5b8cd80c00012fe202000200-200-200.jpg" alt="">
              </div>
              <div class="des-mode">
                    <p>{{userInfo.nickName||'默认名字'}}</p>
                    <span>userId:{{userInfo.userId}}</span>
                    <dl class="des-mode-dl">
                        <dd >
                            <i class="el-icon-user"></i>
                            <div>还未实名认证</div>
                        </dd>
                        
                        <dd ><i class="el-icon-dish"></i>
                            <div>还未学籍认证</div>
                        </dd>
                        
                        <dd class="active">
                            <i class="el-icon-mobile-phone"></i>
                            <div>你已绑定手机</div>
                        </dd>
                        <dd >
                            <i class="el-icon-message"></i>
                            <div>还未绑定邮箱</div>
                        </dd>
                    </dl>
              </div>
          </div>
          <div class="list-wapper">
              <h2>账户管理</h2>
              <div class="line"></div>
              <ul class="menu">
                  <li @click="handleSelect('/personalSetting')">
                      <div :class="isOn ==0? 'on':''">
                        <span>账号绑定</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </li>
                    <li @click="handleSelect('/personalSetting/settingPersonalInformation/idx=1')">
                      <div :class="isOn ==1? 'on':''">
                        <span>个人信息</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </li>
                    <li @click="handleSelect('/personalSetting/settingAccountBinding/idx=2')">
                      <div :class="isOn ==2? 'on':''">
                        <span>操作记录</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </li>
                    <li @click="handleSelect('/personalSetting/settingAccountBinding/idx=3')">
                      <div :class="isOn ==3? 'on':''">
                        <span>实名认证</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </li>
                    <li @click="handleSelect('/personalSetting/settingAccountBinding/idx=4')">
                      <div :class="isOn ==4? 'on':''">
                        <span>学籍认证</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </li>
                    <li @click="handleSelect('/personalSetting/settingAccountBinding/idx=5')">
                      <div :class="isOn ==5? 'on':''">
                        <span>收件地址</span>
                        <i class="el-icon-arrow-right"></i>
                      </div>
                    </li>
              </ul>
          </div>
      </div>
      <!-- 右侧setting-profile -->
      <div class="settingRight">
          <router-view></router-view>
      </div>
    </div>

  </div>
</template>

<script>
import settingAccountBinding from '../components/settingAccountBinding'
import settingPersonalInformation from '../components/settingPersonalInformation'

export default {
    components:{
        settingAccountBinding,
        settingPersonalInformation,

    },
    data() {
        return {
            isOn:0,
            userInfo:{}
        }
    },
    created() {
            // this.$router.push({ 
            //     path:'/personalSetting/settingAccountBinding/idx=0'
            // })
          //获取本地存储的用户信息
          this.userInfo = JSON.parse(localStorage.getItem('data'))
          if(this.userInfo === null){
            this.userInfo = {}
          }
          //导航栏激活状态
          let n = window.location.href.split('=')[1]
          if(n === undefined){
            n =0
          }
          this.isOn = n
          // console.log(window.location.href)
          // console.log(this.isOn)
    },
    methods: {
      //导航菜单切换
      handleSelect(path) {
          let n = path.split('=')[1]
          if(n === undefined){
            n =0
          }
            this.isOn = n
            // console.log(path)
            this.$router.push({
                path
            })
      },
      
      //个人设置
      handleSetting(path){
        this.$router.push({
                path
            })
      }
    },
}
</script>

<style>
@import url('../assets/css/personalSetting.css');
</style>